<template>
  <div>子组件</div>
  <button @click="count++">点我加一</button>
  <span>点击次数: {{count}}</span>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {

    //以下为组合式(composition)API写法
    console.log('~~~ setup ~~~') // 相当于代替了beforeCreate和created

    onBeforeMount(()=>{
      console.log('~~~ onBeforeMount ~~~')
    })
    onMounted(()=>{
      console.log('~~~ onMounted ~~~')
    })
    onBeforeUpdate(()=>{
      console.log('~~~ onBeforeUpdated ~~~')
    })
    onUpdated(()=>{
      console.log('~~~ onUpdated ~~~')
    })
    onBeforeUnmount(()=>{
      console.log('~~~ onBeforeUnmount ~~~')
    })
    onUnmounted(()=>{
      console.log('~~~ onUnmounted ~~~')
    })

    let count = ref(0)
    return {count}
  },
  //hook配置项测试
  beforeCreate() {
    console.log('*** beforeCreate ***')
  },
  created() {
    console.log('*** created ***')
  },
  beforeMount() {
    console.log('*** beforeMount ***')
  },
  mounted() {
    console.log('*** mounted ****')
  },
  beforeUpdate() {
    console.log('*** beforeUpdate ****')
  },
  updated() {
    console.log('*** updated ****')
  },
  beforeUnmount() {
    console.log('*** beforeUnmount ****')
  },
  unmounted() {
    console.log('*** unmounted ****')
  }
}
</script>